<template>
  <div    :style="{height:'200px',width:'100%'}">
    <el-row>
        <el-col :span="8"   style="height: 200px;width:100%; text-align: center;background-color: #c2ddff;">
            <el-tag class="ml-2"  size="large" type="success"  style="margin-top: 0px">总计</el-tag>
            <dv-digital-flop  :config="config0"  style="margin-bottom: 20px"/>
        </el-col>
      <el-col   :span="8"  style="height: 200px; width:100%;text-align: center;background-color: #e8ffee;">
        <el-tag class="ml-2"  size="large" type="success"  style="margin-top: 0px">正常</el-tag>
        <dv-digital-flop  :config="config1"  style="margin-bottom: 20px"/>
      </el-col>

      <el-col  :span="8"  style="height: 200px;width:100%; text-align: center;background-color: #cccccc; ">
        <el-tag class="ml-2"  size="large" type="danger"  style="margin-top: 0px">停用</el-tag>
        <dv-digital-flop :config="config2"   style="margin-bottom: 20px"/>
      </el-col>

    </el-row>
  </div>
</template>
<script lang="ts" setup>
import {getCurrentInstance, onMounted, onUpdated,onDeactivated, provide, reactive, ref, toRaw, toRefs, watch, nextTick} from 'vue'
const emit = defineEmits(["parentFun"]);
const config0 = reactive({
  number: [0],
  content: '{nt}个',
  style: {
    //这里可以修改默认样式
    fontSize: 30,//字体大小
    fill: '#0a0a0a',//字体颜色
    textAlign:'top'
  }
})
const config1 = reactive({
    number: [0],
    content: '{nt}个',
    style: {
        //这里可以修改默认样式
        fontSize: 30,//字体大小
        fill: '#0a0a0a',//字体颜色
        textAlign:'top'
    }
})
const config2 = reactive({
  number: [0],
  content: '{nt}个',
  style: {
    //这里可以修改默认样式
    fontSize: 30,//字体大小
    fill: '#0a0a0a',//字体颜色

  }
})



const setData = (data: any) => {

  config0.number[0] = data[0].ALLCOUNT;
  config1.number[0] = data[0].SUCCESSCOUNT;
  config2.number[0] = data[0].FAILCOUNT;
 }


interface exposeInterface{
  setData:(dataList: any)=>void
}
//子级暴露方法
defineExpose<exposeInterface>({
  setData
})
</script>

